<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <van-image
        width="60"
        height="60"
        round
        fit="cover"
        :src="userInfo.photo"
      />
      <h2>
        {{ userInfo.name }}
        <br />
        <van-tag plain type="primary">{{ userInfo.birthday }}</van-tag>
      </h2>
    </div>
    <!-- 作品 -->
    <van-row class="work">
      <van-col span="8">
        <van-icon name="newspaper-o" color="#a4b1fe" />
        <span>我的作品</span>
      </van-col>
      <van-col span="8">
        <van-icon name="star-o" color="#ff7e8e" />
        <span>我的收藏</span>
      </van-col>
      <van-col span="8">
        <van-icon name="tosend" color="#ffd27e" />
        <span>阅读历史</span>
      </van-col>
    </van-row>
    <!-- 单元格 -->
    <van-cell-group>
      <van-cell
        title="编辑资料"
        icon="edit"
        is-link
        @click="$router.push({ path: '/edit' })"
      />
      <van-cell title="小智同学" icon="chat-o" is-link />
      <van-cell title="系统设置" icon="setting-o" is-link />
      <van-cell title="退出登录" icon="warning-o" is-link @click="hint" />
    </van-cell-group>
  </div>
</template>

<script>
import { getUserInfo } from "./user.js";
import { removeToken } from "../../utils/token";
import { Dialog } from "vant";
export default {
  name: "user",
  data() {
    return {
      userInfo: {},
    };
  },
  created() {
    getUserInfo().then((res) => {
      console.log(res);
      this.userInfo = res.data.data;
      this.$store.commit("updataUserInfo", res.data.data);
    });
  },
  methods: {
    hint() {
      Dialog.confirm({
        title: "提示",
        message: "确认要退出吗？",
      }).then(() => {
        removeToken();
        this.$router.push("/home");
      });
    },
  },
};
</script>

<style lang="less">
.header {
  height: 100px;
  background-color: #1989fa;
  display: flex;
  padding: 0px 10px;
  align-items: center;
  h2 {
    font-size: 18px;
    color: white;
    font-weight: normal;
    padding: 0px 10px;
  }
}
.work {
  margin: 10px 0px;
  text-align: center;
  span {
    display: block;
    font-size: 12px;
  }
}
</style>